<template>
  <div style="padding-left:20px;margin-top:15px;">
    <!-- 标题栏 -->
    <el-row style="font-size:22px;font-weight:bold;line-height:60px">
      <el-col :span="22"><span>车辆管理</span></el-col>
      <el-col :span="2">
        <el-button type="primary" style="float:right;position:relative;top:5px;right:20px;" @click="beforeAddVehicle">新增车辆</el-button>
      </el-col>
    </el-row>
    <!-- 新增车辆弹窗 -->
    <el-dialog :title="dialogTitle" style="width:1000px;padding:40px;" v-model="dialogVisible" :before-close="handleClose">
      <el-form label-position="top" style="margin:10px;">
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="车辆品牌"><el-input placeholder="请输入内容" v-model="saveVehicleForm.brand"></el-input></el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="车牌号"><el-input placeholder="请输入内容" v-model="saveVehicleForm.license"></el-input></el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="车辆型号"><el-input placeholder="请输入内容" v-model="saveVehicleForm.model"></el-input></el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="车辆识别码"><el-input placeholder="请输入内容" v-model="saveVehicleForm.code"></el-input></el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="车辆排量">
              <el-select placeholder="请选择">
                <el-option v-model="saveVehicleForm.displacement"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="车辆类型">
              <el-select>
                <el-option placeholder="请选择" v-model="saveVehicleForm.type"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="车身颜色">
              <el-select placeholder="请选择">
                <el-option v-model="saveVehicleForm.color"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="里程数"><el-input placeholder="请输入内容" v-model="saveVehicleForm.kilometers"></el-input></el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="购买时间"><el-date-picker style="width: 450px" v-model="saveVehicleForm.buyTime"></el-date-picker></el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="上牌时间"><el-date-picker style="width: 450px" v-model="saveVehicleForm.regTime"></el-date-picker></el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="购买价格"><el-input placeholder="请输入内容" v-model="saveVehicleForm.price"></el-input></el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="电池类型">
              <el-select placeholder="请选择">
                <el-option v-model="saveVehicleForm.batteryType"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" >保存</el-button>
      </template>
    </el-dialog>
    <!--    查询栏-->
    <el-card style="width:99%;height:70px;font-weight:bold;">
      <el-form :inline="true" style="padding-right:50px;">
        <el-form-item label="车辆品牌"><el-input placeholder="请输入内容" @keydown.enter="loadVehicle"></el-input></el-form-item>
        <el-form-item label="车牌号" style="width: 270px">
          <el-input placeholder="请输入内容"  @keydown.enter="loadVehicle"></el-input>
        </el-form-item>
        <el-form-item style="margin-right:10px;" ><el-button >重置</el-button></el-form-item>
        <el-form-item><el-button type="primary"  >查询</el-button></el-form-item>
      </el-form>
    </el-card>
    <!--    列表栏-->
    <el-card style="width:99%;margin-top:10px;">
      <el-table :data="vehicleArr">
        <el-table-column type="index" label="编号" width="80px" align="center"></el-table-column>
        <el-table-column label="车辆品牌" prop="brand" align="center"></el-table-column>
        <el-table-column label="车牌号" prop="license" align="center"></el-table-column>
        <el-table-column label="车辆识别码" prop="code" align="center"></el-table-column>
        <el-table-column label="车辆类型" prop="type" align="center"></el-table-column>
        <el-table-column label="购买价格" prop="price" align="center"></el-table-column>
        <el-table-column label="购买时间" prop="buyTime" align="center"></el-table-column>
        <el-table-column label="上牌时间" prop="regTime" align="center"></el-table-column>
        <el-table-column label="电池类型" prop="batteryType" align="center"></el-table-column>
        <el-table-column label="车辆状态" prop="status" align="center"></el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button link type="primary" >编辑</el-button>
            <el-button link type="primary" >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup>

</script>

<style scoped>

</style>